<template>
  <div class="wrapper">
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
  </div>
  <div class="wrapper wrapper2">
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
  </div>
  <div class="wrapper wrapper3">
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
  </div>
</template>
<style scoped>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* === 
  grid-template-columns: 1fr 1fr 1fr; 
  */
}
.wrapper2 {
  display: grid;
  grid-template-columns: 20px repeat(4, 1fr) 200px;
}
.wrapper3 {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}
</style>